<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['系统配置','轨迹修复V2.0']" icon="fa fa-cog" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<div class="row top_view" id="pathfixHtml">
		<div class="page-header clearfix s_table_opreation" style="margin:0">
			<div class="left page-header-btn" style="width: calc(100%);">
				<div class="minInp">
					<div class="s2_tableCar">
						<table-select-car (outerCar)='getSelectCarInfo($event)' [noCompany]='true'></table-select-car>
					</div>
					
					<div class="top_module">
						<span class="module_text">设备ID</span>
						<input class="module_inp" [(ngModel)]="htmlParams.deviceId" type="text">
					</div>
					<div class="selectDate top_module" style="margin-left: 16px;">
						<table-select-date  (outerTime)="getSelectTime($event)" [notInit]='true' ></table-select-date>
					</div>
					<button class="btn btn-primary btn-sm" (click)="lookTrack()" >查看轨迹</button>
				</div>
				<div class="minInp">
					<div class="top_module">
						<span class="module_text">发车前停止</span>
						<input class="module_inp" [(ngModel)]="htmlParams.runBefore"  type="text">
					</div>
					<div class="top_module">
						<span class="module_text">发车时间</span>
						<input class="module_inp" [(ngModel)]="htmlParams.runTime" type="text"  >
					</div>
					<div class="top_module">
						<span class="module_text">起始坐标</span>
						<input class="module_inp" [(ngModel)]="planningMarker.starPoint.val" type="text"  (click)='getFocusInpType("starPoint")' [ngClass]='{getMapPoint:focusInpType=="starPoint"}'>
					</div>
				</div>
				<div class="minInp">
					<div class="top_module">
						<span class="module_text">卸货前停止</span>
						<input class="module_inp" [(ngModel)]="htmlParams.stopBefore" type="text" >
					</div>
					<div class="top_module">
						<span class="module_text">完成时间</span>
						<input class="module_inp" [(ngModel)]="htmlParams.stopTime" type="text">
					</div>
					<div class="top_module">
						<span class="module_text">结束坐标</span>
						<input class="module_inp" [(ngModel)]="planningMarker.endPoint.val" type="text" (click)='getFocusInpType("endPoint")' [ngClass]='{getMapPoint:focusInpType=="endPoint"}'>
					</div>
				</div>
				<div>
					<div class="top_module apointWarp" *ngFor="let item of planningMarker.approachList;let i=index;">
						<span class="module_text">途经点{{item.itemId}}</span>
						<input class="module_inp" [(ngModel)]="item.val" type="text" (click)='getFocusInpType(item.itemId)' [ngClass]='{getMapPoint:focusInpType==item.itemId}'>
						<span class="del_btn" (click)="delApproachPoint(item.itemId)">×</span>
					</div>
					<button class="btn btn-primary btn-sm" (click)="addApproachPoint()"  style="margin-left: 8px;">+途经点</button>
					<button class="btn btn-primary btn-sm" (click)="getStartLnglat();getEndLnglat();"  style="margin-left: 8px;">自动添加</button>
					<button class="btn btn-primary btn-sm" (click)="removeApproachPoint()"  style="margin-left: 8px;">清空途径点</button>
				</div>
				
				
				
			</div>
		</div>
		<div style="padding: 12px 0;border-bottom:1px solid #eee" >
			<addproblem [deviceId]='htmlParams.deviceId' [carNumber]='htmlParams.carNumber'></addproblem>
		</div>
		<div class="col-xs-12" style="padding: 12px 0;">
			<div class="col-xs-12 col-sm-4 col-lg-3">
				<label style="margin-left: 8.33%;">
					<input name="isMakeup" class="ace ace-checkbox-2 makeupTime" type="checkbox" [(ngModel)]="htmlParams.isMakeup">
					<span class="lbl"> 弥补缺失数据</span>
				</label>
			</div>
			<div class="col-xs-12 col-sm-4 col-lg-3">
				<label style="margin-left: 8.33%;">
					<input id="" name="isRemove"  class="ace ace-checkbox-2 isRemove" type="checkbox" [(ngModel)]="htmlParams.isRemove">
					<span class="lbl"> 移除弥补的数据</span>
				</label>
			</div>
			<!--<div class="col-xs-12 col-sm-4 col-lg-3">
				<label style="margin-left: 8.33%;">
					<input id="" name="isAutoApproach"  class="ace ace-checkbox-2 isAutoApproach" type="checkbox" [(ngModel)]="htmlParams.isAutoApproach">
					<span class="lbl"> 自动添加途径点</span>
				</label>
			</div>-->
		</div>
			
		<div style="padding-left: 8.33%;margin-left: 13px;">
			<button class="btn btn-primary btn-sm" (click)="routePlanning()">路线规划</button>
			<button class="btn btn-primary btn-sm" (click)="closeRoutePlanning()">线路撤销</button>
			
			
			<button class="btn btn-success btn-sm" (click)="getRodioTrack()">轨迹修复</button>
			<button class="btn btn-danger btn-sm" (click)="revokeTrack()">轨迹撤销</button>
		</div>
	</div>
	<div class="row center_view">
		<div class="col-xs-10 mapDiv">
			<div id="myMap" style="height: 600px;"></div>
			<input class="form-control" type="text" [(ngModel)]="addressSearch" id="addressSearch" placeholder="请输入地址" style="position: absolute;left: 20px;top: 10px;z-index:99;width: 240px;opacity: 1;" />
		</div>
		<div class="col-xs-12 col-sm-2 carListView">
			<div  class="top-search" style="width: 96%;margin: 6px auto 0 auto;">
				<input  class="search-input ng-untouched ng-pristine ng-valid" [(ngModel)]="searchTrackVal" id="searchTrackInp" placeholder="输入关键字..." type="text" />
				<span  class="top-search-box" (click)="searchTrackList()">
			        <button  class="top-search-btn" type="button"> <i  class="fa fa-search"></i></button>
			    </span>
			</div>
			<div *ngIf='isloading' class="loadImg"><img src="assets/img/loading-0.gif"  /></div>
			<div class="listTitle" title="轨迹数：{{roadLength}}条 &nbsp;&nbsp;总里程：{{totalDistance}}Km">轨迹数：{{roadLength}}条 &nbsp;&nbsp;总里程：{{totalDistance}}Km</div>
			<ul class="trackList ">
				<li class="liItem" 
					(click)="listItemEvent($event,i+1)"
					*ngFor='let item of roadListArr; let i =index' 
					[ngClass]="{selectItem: item.id === selectItem}"
					title="{{item.roadName}}&nbsp;&nbsp; [{{item.distance}}km]">
					<!--<label class="checkInp" >
						<span class="diyCheck" [ngClass]="{testClass:selectItemId==item.id}" (click)="selectItem($event,item.id)"></span>
						<span class="lbl"></span>
					</label>   -->
					<span class="diyCheck" [ngClass]="{testClass:selectItemId==item.id}" (click)="selectItem($event,item.id)"></span>
					<span class="sortTrack">{{i+1}}</span>&nbsp;&nbsp;&nbsp;{{item.roadName}}&nbsp;&nbsp; [{{item.distance}}km]
				</li>
			</ul>
			<div  class="row treeBtn"></div>
			<div class="eidtBtnGroup">
				<button class="btn btn-primary btn-sm" id="uploadTrack"  (click)='isOpenUplod("open")'>上传</button>
				<button  class="btn btn-primary btn-sm"  (click)="delTrack()">删除</button>
			</div>
		</div>
	</div>
	
	<div class='uplodTrackView'  *ngIf="isUplodTrack">
    	<div class="overLay"></div>
		<div class="alertContent row">  
			<form class="form-horizontal" >
				<div class="form-group">
					<label class="control-label col-sm-2 no-padding-right" for="version">轨迹名称：</label>
					<div class="col-sm-10">
						<div class="clearfix">
							<input class="form-control" name="roadName" [(ngModel)]="roadName" type="text" placeholder="轨迹名称..." />
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-2 no-padding-right" for="description">轨迹描述：</label>
					<div class="col-sm-10">
						<div class="clearfix">
							<input class="form-control" name="remark" [(ngModel)]="remark" type="text" placeholder="轨迹描述..." />
						</div>
					</div>
				</div>
				<div class="hr hr-dotted"></div>
				<div class="form-group">
					<label class="control-label col-sm-2 no-padding-right" for="file">文件上传：</label>
					<div class="col-sm-10 fileWarp">
						<input type="file" id="file" name="file"  (change)="getFile($event.target.files)" />
						<div class="diyFiletext">{{selectFileStr}}</div>
					</div>
				</div>
				<div class="hr hr-dotted"></div>
				<div class="center">
					<button  type="button"  class="btn btn-info btn-sm" (click)='isOpenUplod("close")'><i class="fa fa-arrow-left"></i>&nbsp;取消</button>
					<button  type="button" class="btn btn-success btn-sm"  (click)='submitUpload()'><i class="fa fa-upload"></i>&nbsp;上传</button>
				</div>
			</form>
		</div>
	</div>
</div>
<style type="text/css">
	.fileWarp{
		position: relative;
	}
	#file{
		opacity: 0;
		z-index: 2;
		position: absolute;
	    width: 94%;
	}
	.diyFiletext{
		z-index: 1;
		top: 0px;
	    line-height: 24px;
	    width: 100%;
	    padding-right: 24px;
	    border: 1px solid #ccc;
	    padding-left: 12px;
	    color: #9999a6;
	}
</style>